<template>
  <div>
    <a-layout style="height: 1730px;">
      <a-layout-content style="background-color: #F2F2E6">
        <div style="text-align: center">
          <img src="../../public/images/idea.png"
               alt=""
               style="margin-top: 100px; height: 320px; width: 240px"
          />
        </div>
        <br><br><br>
        <p align="center"
           style="font-family: '华文楷体',sans-serif; font-size: 35px; color: #89B8CA; font-weight: bolder">
          您是否在发明创造过程中遇到了什么困难？
        </p>
        <p align="center"
           style="font-family: '华文楷体',sans-serif; font-size: 19px; color: #2C2E2D; font-weight: bold">
          欢迎使用MindFall智能创新引导工具，MindFall旨在利用可收集到的专利信息，利用大数据和人工智能的方式，<br>
          结合科学的发明创造理论为您精准提供专利信息和解决方案，引导您找到最合适的解决方案！
        </p>
        <br><br>
        <v-card max-width="1200px"
                class="mx-auto elevation-15"
                style="background-color: #89B8CA; font-family: '华文楷体',sans-serif; padding-left: 20px; padding-right: 20px">
<!--步骤时间轴-->
          <v-timeline
            :dense="$vuetify.breakpoint.smAndDown"
          >
            <v-timeline-item color='main_2'>
<!--步骤序号-->
              <template v-slot:icon>
                <span style="font-weight: bolder">1</span>
              </template>
<!--步骤内容-->
              <v-card class="elevation-5" style="background-color: #FFFAF4">
                <v-card-title class="text-h5">
                  问题引导
                </v-card-title>
                <v-card-text style="font-weight: bold">
                  我们将为您提供一份问卷，请您仔细思考后再给出回答。
                </v-card-text>
              </v-card>

            </v-timeline-item>
            <v-timeline-item color='main_2'>
              <template v-slot:icon>
                <span style="font-weight: bolder">2</span>
              </template>
              <v-card class="elevation-5" style="background-color: #FFFAF4">
                <v-card-title class="text-h5">
                  问题模型建立
                </v-card-title>
                <v-card-text style="font-weight: bold">
                  我们将为您提供一个功能组件关系图的绘制工具，您可以根据遇到的问题及各功能部件之间的关系绘制出一个尽可能详细的功能模型分析图。
                </v-card-text>
              </v-card>
            </v-timeline-item>
            <v-timeline-item color='main_2'>
              <template v-slot:icon>
                <span style="font-weight: bolder">3</span>
              </template>
              <v-card class="elevation-5" style="background-color: #FFFAF4">
                <v-card-title class="text-h5">
                  生成解决途径
                </v-card-title>
                <v-card-text style="font-weight: bold">
                  我们将根据由功能模型图生成若干条解决途径供您选择，请您根据问卷的回答以及实际情况进行选择。同时，您也可以使用矛盾矩阵更加精准地确定解决问题的方式。
                </v-card-text>
              </v-card>
            </v-timeline-item>
            <v-timeline-item color='main_2'>
              <template v-slot:icon>
                <span style="font-weight: bolder">4</span>
              </template>
              <v-card class="elevation-5" style="background-color: #FFFAF4">
                <v-card-title class="text-h5">
                  专利智能搜索及标记
                </v-card-title>
                <v-card-text style="font-weight: bold">
                  我们将根据您选择的创新方向为您智能提供若干个“问题因子”，您可以使用这些“问题因子”在我们的专利库中进行检索，获得对您有帮助的专利。
                  <br>
                  同时您可以标记自己认为有参考价值的专利，对其进行笔记和注释，并存入个人笔记中。
                </v-card-text>
              </v-card>
            </v-timeline-item>
            <v-timeline-item color='main_2'>
              <template v-slot:icon>
                <span style="font-weight: bolder">5</span>
              </template>
              <v-card class="elevation-5" style="background-color: #FFFAF4">
                <v-card-title class="text-h5">
                  解决方案形成
                </v-card-title>
                <v-card-text style="font-weight: bold">
                  经过上述步骤，相信您一定获得了不少启发吧？记录下您的解决方案并发布到社区和其他创新工程师一起讨论吧！
                </v-card-text>
              </v-card>
            </v-timeline-item>
          </v-timeline>
        </v-card>
        <div style="text-align: center; margin-top: 50px;">
            <v-row justify="center">
              <v-btn
                elevation="12"
                rounded
                large
                color="main_1"
                @click.stop="dialog = true"
                style="font-family: '华文楷体',sans-serif; font-weight: bold; font-size: 15px; color:#FFFAF4;"
              >
                <span>开始使用</span>
                &nbsp;
                <a-icon type="double-right" />
              </v-btn>

              <v-dialog
                v-model="dialog"
                max-width="400"
              >
                <v-card rounded="xl" style="font-family: '华文楷体',sans-serif; font-weight: bold">
                  <v-card-title class="text-h6" style="font-family: '华文楷体',sans-serif">
                    开始一段创新引导吧！
                  </v-card-title>
                  <br>
                  <v-card-text>
                    <a-input v-model="guideName"
                             :max-length="10"
                             placeholder="为您的创新引导起个名字（不超过10个字）"/>
                  </v-card-text>

                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                      color="#89B8CA"
                      text
                      @click="createNewGuide"
                    >
                      继续
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </v-row>
        </div>

      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
  import request from "../utils/request";
    export default {
        name: "Guidance_Info",
      created() {
        this.guideName = ''
        this.$store.commit('SET_KEEP_ALIVE', [])
        // console.log(this.$store.state.keepAlive)
      },
      data: () => ({
        guideInfo: {},
        dialog: false,
        guideName: ''
      }),
      methods: {
          async createNewGuide(){
            const h = this.$createElement
            if (this.guideName === ''||this.guideName.split(" ").join("").length === 0){
              this.sendWarnMessage('创新引导名称不能为空哦')
              return
            }
            this.guideInfo.name = this.guideName
            this.guideInfo.userId = -1
            this.guideInfo.process = 0
            await request.post("/guide/insert", this.guideInfo).then(res => {
              if (res.code === '200') {
                this.sendSuccessMessage(res.msg)
                sessionStorage.setItem('guideId',window.btoa(window.encodeURIComponent(JSON.stringify(res.data.id))))
                //页面跳转，进入系统
                this.dialog = false
                this.$store.commit('SET_KEEP_ALIVE', ['guidance_questions', 'guidance_model', 'guidance_retrieval', 'solution_edit'])
                // console.log(this.$store.state.keepAlive)
                if (sessionStorage.getItem('graph'))
                  sessionStorage.removeItem('graph')
                if (sessionStorage.getItem('selectableNodes'))
                  sessionStorage.removeItem('selectableNodes')
                this.$router.push('/intelligent_guidance/questions')
              } else {
                //返回错误信息
                this.sendWarnMessage(res.msg)
              }
            })
          }
      }
    }
</script>

<style scoped>

</style>
